Implement TextBox component with HTML5 input type support by Copilot · Pull Request #286 · FritzAndFriends/BlazorWebFormsComponents

Copilot · 2026-01-28T19:07:50Z

Implements the TextBox component emulating ASP.NET Web Forms System.Web.UI.WebControls.TextBox with support for single-line, multi-line (textarea), password, and HTML5 input types.

Component Implementation

TextBox.razor/.razor.cs: Renders <input> or <textarea> based on TextMode property
TextBoxMode enum: 16 input types (SingleLine, MultiLine, Password, Email, Number, Date, DateTime, DateTimeLocal, Month, Week, Time, Url, Phone, Search, Range, Color)
Properties: Text, MaxLength, Rows, Columns, ReadOnly, Placeholder, plus inherited styling (BackColor, ForeColor, BorderColor, CssClass, Width, Height)

Style System Enhancement

Fixed missing width/height rendering in HasStyleExtensions.ToStyle() - now properly outputs width and height CSS properties for all styled components:

.AddStyle("width", hasStyle.Width.ToString(), hasStyle.Width != Unit.Empty)
.AddStyle("height", hasStyle.Height.ToString(), hasStyle.Height != Unit.Empty)

Usage Example

<!-- Single-line text -->
<TextBox Text="@userName" CssClass="form-control" />

<!-- Multi-line textarea -->
<TextBox TextMode="TextBoxMode.MultiLine" Rows="5" Columns="40" />

<!-- HTML5 input types -->
<TextBox TextMode="TextBoxMode.Email" Placeholder="email@example.com" />
<TextBox TextMode="TextBoxMode.Date" />

<!-- Styled -->
<TextBox BackColor="WebColor.LightYellow" 
         Width="Unit.Pixel(200)" 
         MaxLength="50" />

Test Coverage

28 unit tests covering input modes, attributes, styling, and visibility. All 274 solution tests pass.

Original prompt

This section details on the original issue you should resolve

<issue_title>Implement TextBox Component</issue_title>
<issue_description>## Overview

Implement the TextBox Blazor component that emulates the ASP.NET Web Forms System.Web.UI.WebControls.TextBox control. This is an essential form control used for single-line text input, password input, and multi-line text areas.

Microsoft Docs Reference: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.textbox?view=netframework-4.8

Phase 1: Research & Reference Setup

Step 1: Add Web Forms Sample Page

Create sample page at samples/BeforeWebForms/ControlSamples/TextBox/Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html>
<head><title>TextBox Sample</title></head>
<body>
    <form id="form1" runat="server">
        <h2>Single Line TextBox</h2>
        <asp:TextBox ID="txtSingle" Text="Default Text" CssClass="form-control" runat="server" />
        
        <h2>Password TextBox</h2>
        <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" />
        
        <h2>MultiLine TextBox</h2>
        <asp:TextBox ID="txtMulti" TextMode="MultiLine" Rows="5" Columns="40" runat="server" />
        
        <h2>ReadOnly TextBox</h2>
        <asp:TextBox ID="txtReadOnly" Text="Cannot edit" ReadOnly="true" runat="server" />
        
        <h2>Disabled TextBox</h2>
        <asp:TextBox ID="txtDisabled" Text="Disabled" Enabled="false" runat="server" />
        
        <h2>With MaxLength</h2>
        <asp:TextBox ID="txtMaxLen" MaxLength="10" runat="server" />
        
        <h2>With Styles</h2>
        <asp:TextBox ID="txtStyled" BackColor="LightYellow" ForeColor="Navy" 
                     BorderColor="Blue" BorderWidth="2" Width="200px" runat="server" />
    </form>
</body>
</html>

Step 2: Capture HTML Output

Run the BeforeWebForms project and document the exact HTML output. Expected patterns:

Single-line TextBox:

<input name="txtSingle" type="text" value="Default Text" id="txtSingle" class="form-control" />

Password TextBox:

<input name="txtPassword" type="password" id="txtPassword" />

MultiLine TextBox:

<textarea name="txtMulti" rows="5" cols="40" id="txtMulti"></textarea>

Phase 2: Blazor Implementation

Step 3: Create Component Files

Create src/BlazorWebFormsComponents/TextBox.razor:

@inherits BaseStyledComponent

@if (Visible)
{
    @if (TextMode == TextBoxMode.MultiLine)
    {
        <textarea @attributes="CalculatedAttributes">@Text</textarea>
    }
    else
    {
        <input type="@CalculatedType" value="@Text" @attributes="CalculatedAttributes" />
    }
}

Create src/BlazorWebFormsComponents/TextBox.razor.cs:

namespace BlazorWebFormsComponents
{
    public partial class TextBox : BaseStyledComponent, ITextComponent
    {
        [Parameter] public string Text { get; set; } = string.Empty;
        [Parameter] public TextBoxMode TextMode { get; set; } = TextBoxMode.SingleLine;
        [Parameter] public int MaxLength { get; set; }
        [Parameter] public int Columns { get; set; }
        [Parameter] public int Rows { get; set; }
        [Parameter] public bool ReadOnly { get; set; }
        [Parameter] public string Placeholder { get; set; }
        [Parameter] public EventCallback<string> TextChanged { get; set; }
        [Parameter] public EventCallback<ChangeEventArgs> OnTextChanged { get; set; }
        
        // AutoComplete, AutoPostBack marked obsolete
    }
}

Step 4: Implement Core Features

Properties to implement:

Text - The text content
TextMode - SingleLine, MultiLine, Password, Email, Number, etc.
MaxLength - Maximum characters allowed
Columns - Width in characters (maps to size or cols)
Rows - Height in rows (MultiLine only)
ReadOnly - Prevents editing
Enabled - From base class, maps to disabled
CssClass - From base class
All style properties from BaseStyledComponent

TextBoxMode enum (create in Enums/TextBoxMode.cs):

public enum TextBoxMode
{
    SingleLine,
    MultiLine,
    Password,
    Color,
    Date,
    DateTime,
    DateTimeLocal,
    Email,
    Month,
    Number,
    Range,
    Search,
    Phone,
    Time,
    Url,
    Week
}

Phase 3: Testing & Documentation

Step 5: Add Unit Tests

Create tests in src/BlazorWebFormsComponents.Test/TextBox/:

Text.razor - Test text binding
TextMode.razor - Test different modes render correct input types
MultiLine.razor - Test textarea rendering
Attributes.razor - Test MaxLength, Rows, Columns, ReadOnly
Style.razor - Test CSS class and inline styles

Example test:

@inherits BunitContext

@code {
    [Fact]
    public void TextBox_SingleLine_RendersInputText()
    {
        var cut = Render(@<TextBox Text="Hello" CssClass="my-class" />);
        
        var input = cu...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

- Fixes FritzAndFriends/BlazorWebFormsComponents#285

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Initial plan

751403e

Copilot AI assigned Copilot and csharpfritz Jan 28, 2026

Copilot started work on behalf of csharpfritz January 28, 2026 19:08 View session

Copilot AI and others added 5 commits January 28, 2026 19:11

Add TextBox component with TextBoxMode enum

9c8fbb6

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Add TextBox unit tests and fix width/height style rendering

92a1d14

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Add TextBox samples and documentation

0c6754f

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Fix TextBox sample page binding syntax

c1129c5

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

TextBox component implementation complete

98c30b8

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Implement TextBox Blazor component~~ Implement TextBox component with HTML5 input type support Jan 28, 2026

Copilot AI requested a review from csharpfritz January 28, 2026 19:28

Copilot finished work on behalf of csharpfritz January 28, 2026 19:28

Merge branch 'dev' into copilot/implement-textbox-component

5058acc

csharpfritz marked this pull request as ready for review January 28, 2026 20:10

csharpfritz merged commit 39d60c0 into dev Jan 28, 2026
1 check passed

csharpfritz deleted the copilot/implement-textbox-component branch January 28, 2026 21:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement TextBox component with HTML5 input type support#286

Implement TextBox component with HTML5 input type support#286
csharpfritz merged 7 commits intodevfrom
copilot/implement-textbox-component

Copilot AI commented Jan 28, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Component Implementation

Style System Enhancement

Usage Example

Test Coverage

Phase 1: Research & Reference Setup

Step 1: Add Web Forms Sample Page

Step 2: Capture HTML Output

Phase 2: Blazor Implementation

Step 3: Create Component Files

Step 4: Implement Core Features

Phase 3: Testing & Documentation

Step 5: Add Unit Tests

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 28, 2026 •

edited

Loading